<template>
    <div class="orderDetail">
      <div class="orderDetail-header">
         <div class="header-headline">等待服务开始</div>
         <div class="header-main">
            <div class="main-wait">
              <span class="main-title">等待时长</span>
              <span class="main-value">10秒</span>
            </div>
            <div class="main-pay">
              <span class="main-title">总计付款</span>
              <span class="main-value">5奇妙币</span>
            </div>
            <div class="main-grade">
              <span class="main-title">订单等级</span>
              <span class="main-value">中级</span>
            </div>
         </div>
      </div>
      <div class="orderDetail-waist">
         <div class="order-user-info">
           <div class="user-headImg-wrapper">
             <img src="@/assets/img/head.jpg" alt="" class="user-headImg">
             <van-tag round type="primary" class="user-level">LV1</van-tag>
           </div>
           <div class="user-nickname-type">
             <div class="user-nickname">大V超人</div>
             <div class="user-type">文字&语音条 30分钟</div>
           </div>
         </div>
           <div class="order-info">
               <div class="info-list" v-for="(item, index) in infoList" :key="index">

                 <div class="info-list-left wx_copy" v-if="item.info_name=='微信号：'" v-model="wx = item.info_value">{{item.info_name}}</div>
                 <div class="info-list-left" v-else>{{item.info_name}}</div>
                 <div class="info-list-right">{{item.info_value}}</div>
               </div>
             </div>
      </div>
      <div class="order-footer">
          <div class="wechat-server-wrapper">
             <van-button type="info" class="wechat-copy" v-clipboard:copy="wx"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError">复制微信</van-button>
             <van-button type="info" class="server-go" @click="server_go">开始服务</van-button>
          </div>

      </div>
      <router-link to="" class="add-wechat">添加不上微信号？</router-link>


<!--复制成功-->
      <van-popup
        v-model="showSuccess"
        class="place-order-success"
        closeable
        close-icon="close"
      >
        <div class="place-order-wrapper">
          <div class="pay-success">
            <div class="success-pic-wrapper">
              <img src="@/assets/img/success.png" alt="" class="success-pic">
            </div>
            <div class="success-text">复制成功</div>
            <div class="success-tip">
              成功复制联系方式至剪切板~
            </div>
            <div class="success-read">
              <div class="detail" @click="sure">确定</div>
            </div>
          </div>
        </div>
      </van-popup>


<!--复制失败-->
      <van-popup
        v-model="showError"
        class="place-order-error"
        closeable
        close-icon="close"
      >
        <div class="show-wrapper">
          <div class="error-pic-wrapper">
            <img src="@/assets/img/error.png" alt="" class="error-pic">
          </div>
          <div class="order-types">复制失败</div>
          <div class="order-sure">请点击重新复制</div>
          <div class="next">
            <button class="finish-error" @click="finishError">确定</button>
          </div>
        </div>
      </van-popup>

<!--开始服务确认或取消-->
      <van-popup
        v-model="showServer"
        class="place-order-server"
        closeable
        close-icon="close"
      >
        <div class="show-wrapper">
          <div class="server-headline">开始服务</div>
          <div class="server-text">请确认已成功添加用户微信,
            点击确定开始服务计时~</div>
          <div class="next">
            <button class="server-cancel" @click="serverCancel">取消</button> <button class="server-sure" @click="serverSure">确定</button>
          </div>
        </div>
      </van-popup>
<!--开始服务-->

      <van-popup
        v-model="showServerGo"
        class="place-server-go"
        closeable
        close-icon="close"
      >
        <div class="place-order-wrapper">
          <div class="pay-success">
            <div class="success-pic-wrapper">
              <img src="@/assets/img/success.png" alt="" class="success-pic">
            </div>
            <div class="success-text">服务开始</div>
            <div class="success-tip">
              您成功开始服务~
            </div>
            <div class="success-read">
              <router-link to="/clerkorderstatus" class="detail">订单详情</router-link>
            </div>
          </div>
        </div>
      </van-popup>


    </div>
</template>

<script>
  import Vue from 'vue';
  import { Tag, Button, Popup } from 'vant';
  import VueClipboard from 'vue-clipboard2';


  Vue.use(Tag);
  Vue.use(Popup);
  Vue.use(Button);
  Vue.use(VueClipboard);
    export default {
        name: "ClerkOrderDetail",
        data: function () {
           return {
             infoList:[
               {
                 info_name:'订单编号：',
                 info_value:'100159045645047'
               },
               {
                 info_name:'付款时间：',
                 info_value:'2020-05-26 08:04'
               },
               {
                 info_name:'微信号：',
                 info_value:'13053571993'
               },
               {
                 info_name:'服务等级：',
                 info_value:'中级'
               },
               {
                 info_name:'服务类型：',
                 info_value:'文字&语音条'
               },
               {
                 info_name:'服务时长：',
                 info_value:'30分钟'
               },
             ],
             wx :'',
             showSuccess: false,
             showError:false,
             showServer:false,
             showServerGo:false
           }
        },
      methods :{
        onCopy() {
          this.showSuccess = true;
        },
        onError() {
          this.showError = true;
        },
        sure(){
          this.showSuccess = false;
        },
        finishError() {
          this.showError = false;
        },
        server_go() {
          this.showServer = true;
        },
        serverCancel() {
          this.showServer = false;
        },
        serverSure() {
          this.showServer = false;
          this.showServerGo = true;
        }
      }
    }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .orderDetail
    padding .2rem
    .orderDetail-header
      background-color $DefaultWalletColor
      border-radius .2rem
      padding .3rem 0 .5rem 0
      .header-headline
        padding .3rem 0 .5rem 0
        font-size .5rem
        color $DefaultTextColor
        center()
      .header-main
        between-align-items()
        .main-wait, .main-pay, .main-grade
          width calc(100% / 3)
          display flex
          align-items center
          flex-direction column
        .main-title
          color $DefaultTextColor
          font-size .3rem
          padding-bottom .3rem
        .main-value
          color $DefaultTextColor
          font-size .36rem
          padding-bottom .3rem
    .orderDetail-waist
      width calc(100% - .6rem)
      padding .3rem
      border-radius .3rem
      background-color #fff
      .order-user-info
        left()
        .user-headImg-wrapper
          width 1.4rem
          height 1.4rem
          position relative
          .user-headImg
            border-radius .2rem
            height 100%
            width 100%
          .user-level
            position absolute
            bottom 0
            display inline-block
            text-align center
            font-size .1rem
            width .8rem
            border-radius .3rem
            background #000
            color: #fff
        .user-nickname-type
          padding-left .3rem
          display flex
          flex-direction column
          align-items flex-start
          justify-content center
          .user-nickname
            color #666
            font-size .26rem
            padding-bottom .2rem
          .user-type
            color #333
            font-size .3rem
      .order-info
        padding-top .1rem
        .info-list
          padding-top .3rem
          between-align-items()
          .info-list-left
            font-size .3rem
            color #999
          .info-list-right
            font-size .3rem
            color #333
    .order-footer
      padding-top .3rem
      .wechat-server-wrapper
        between-align-items()
       .wechat-copy,.server-go
         width calc( 50% - .15rem)
         height .9rem
         background-color $DefaultWalletColor
         color $DefaultTextColor
         border none
    .add-wechat
      padding-top .2rem
      font-size .2rem
      text-decoration underline !important
      text-decoration $DefaultTextColor
      color $DefaultTextColor
      width 50%
      center()
    .place-order-success
      width 6rem
      border-radius .2rem
      overflow:scroll
      overflow-y:hidden
      .pay-success
        .success-pic-wrapper
          padding-top .85rem
          center()
          .success-pic
            width 1.5rem
            height 1.5rem
        .success-text
          center()
          padding .3rem 0 .2rem 0
          color #333
          font-size .3rem
        .success-tip
          text-align center
          text-indent .3rem
          padding 0 .5rem
          font-size .2rem
          color #666
          line-height .3rem
        .success-read
          padding .3rem
          .detail
            width 100%
            border-radius .1rem
            background-color #CED1EF
            color $DefaultTextColor
            height .7rem
            line-height .7rem
            text-align center
    .place-order-error
      width 6rem
      border-radius .2rem
      overflow:scroll
      overflow-y:hidden
      .show-wrapper
        padding .3rem
        .order-headline
          center()
          color #333
          padding .3rem 0 .7rem 0
          font-size .3rem
        .error-pic-wrapper
          padding .3rem 0
          center()
          .error-pic
            width 1.5rem
            height 1.5rem
        .order-types
          center()
          color #333
          font-size .36rem
        .order-sure
          center()
          font-size .2rem
          color #666
          padding .5rem 0 .7rem 0
        .next
          between-align-items()
          padding .4rem 0 .1rem 0
          .finish-error
            font-size .3rem
            width 100%
            border-radius .3rem
            color $DefaultTextColor
            height .8rem
            background-color #CED1EF
    .place-order-server
      width 6rem
      border-radius .2rem
      overflow:scroll
      overflow-y:hidden
      .show-wrapper
        padding .3rem
        .server-headline
          center()
          color #333
          font-size .3rem
        .server-text
          center()
          font-size .36rem
          line-height .5rem
          color #000
          padding .7rem .5rem 1rem .5rem
        .next
          between-align-items()
          padding .4rem 0 .1rem 0
          .server-cancel
            color #333
            font-size .3rem
            width 2rem
            background-color #fff
            center()
          .server-sure
            font-size .3rem
            width 3.6rem
            border-radius .1rem
            color $DefaultTextColor
            height .8rem
            background-color #CED1EF
    .place-server-go
      width 6rem
      border-radius .2rem
      overflow:scroll
      overflow-y:hidden
      .pay-success
        .success-pic-wrapper
          padding-top .85rem
          center()
          .success-pic
            width 1.5rem
            height 1.5rem
        .success-text
          center()
          padding .3rem 0 .2rem 0
          color #333
          font-size .3rem
        .success-tip
          text-align center
          text-indent .3rem
          padding 0 .5rem
          font-size .2rem
          color #666
          line-height .3rem
          margin-bottom .3rem
        .success-read
          padding .3rem
          .detail
            display inline-block
            width 100%
            border-radius .1rem
            background-color #CED1EF
            color $DefaultTextColor
            height .9rem
            line-height .9rem
            text-align center






</style>
<style>
  .orderDetail .user-level{
    right: 0;
  }
</style>
